<template>
  <view>
    <uni-nav-bar title="新建设备" left-icon="back" @clickLeft="back">
    </uni-nav-bar>
    <view class="content">
      <view style="padding: 10px 15px">
        <uni-forms ref="baseForm" :modelValue="baseFormData">
          <uni-forms-item label="所属网点" required>
            <uni-row :gutter="30">
              <uni-col :span="14">
                <uni-easyinput
                    style="width: 50px"
                    disabled
                    v-model="baseFormData.storeName"
                    placeholder="请选择"
                />
              </uni-col>
              <uni-col :span="10">
                <button
                    type="default"
                    size="mini"
                    @click="open"
                    style="margin-top: 5px"
                >
                  选择
                </button>
              </uni-col>
            </uni-row>
          </uni-forms-item>
          <uni-forms-item label="设备名称" required>
            <uni-easyinput
                v-model="baseFormData.deviceName"
                placeholder="请输入设备名称"
            />
          </uni-forms-item>
          <uni-forms-item label="设备ID" required>
            <uni-easyinput
                v-model="baseFormData.deviceId"
                placeholder="请扫码或手动输入"
                suffixIcon="scan"
                @iconClick="scanClick"
            />
          </uni-forms-item>
          <uni-forms-item label="设备PIN码" required>
            <uni-easyinput
                v-model="baseFormData.pin"
                placeholder="请输入设备PIN码"
            />
          </uni-forms-item>
          <uni-forms-item label="设备地址" required>
            <uni-easyinput
                v-model="baseFormData.name"
                placeholder="请选择设备地址"
                suffixIcon="location"
                @iconClick="openLocation"
            />
          </uni-forms-item>
          <uni-forms-item label="设备图标" required>
            <uni-easyinput
                v-model="baseFormData.icon"
                placeholder="请选择设备地址"
            />
          </uni-forms-item>
        </uni-forms>
        <button
            type="default"
            style="background-color: #2f54eb; color: #ffffff"
            @click="submit('valiForm')"
        >
          保存
        </button>
      </view>
    </view>
    <uni-popup
        ref="popup"
        background-color="#fff"
        @change="change"
        borderRadius="15px 15px 0 0"
    >
      <view class="popup-content">
        <uni-list>
          <uni-list-item
              v-for="(item, index) in sitePoint"
              :key="index"
              :title="item.storeName"
              clickable
              @click="onClick(item)"
          />
        </uni-list>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {getLocalList} from "@/api/device/device";

  export default {
    data() {
      return {
        title: "新建设备",
        baseFormData: {
          deviceName: "",
          storeName: "",
          deviceId: "",
          firmwareVersion: 1,
          isshadow: 0,
          locationWay: 1,
          productId: 41,
          productName: "温湿度智能开关",
          status: 1,
        },
        sitePoint: [],
      };
    },
    onShow() {
      this.getLocalList()
    },
    methods: {
      open() {
        this.$refs.popup.open("bottom");
      },
      openLocation() {

        uni.getLocation({
          type: 'gcj02', //返回可以用于uni.openLocation的经纬度
          success: function (res) {
            console.log('openLocation', res);
            const latitude = res.latitude;
            const longitude = res.longitude;
            uni.openLocation({
              latitude: latitude,
              longitude: longitude,
              success: function () {
                console.log('success');
              },fail: function (res) {
                console.log('fail', res);
              }
            });
          },fail: function (res) {
            console.log('fail', res);
          }
        });
      },
      change(e) {
        if (!e.show) {
        }
        console.log("弹窗状态改变：", e);
      },
      onClick(e) {
        this.baseFormData.storeName = e.storeName;
        this.baseFormData.storeId = e.id;
        uni.showToast({
          title: e.title,
          icon: "none",
        });
        this.$refs.popup.close();
      },
      getLocalList() {
        getLocalList().then((res) => {
          console.log('getDeptList', res);
          //把storeName转换成name
          this.sitePoint = res.data.list;
        });
      },
      scanClick(type) {
        const _this = this;
        uni.scanCode({
          success: function (res) {
            console.log("条码类型：" + res.scanType);
            console.log("条码内容：" + res.result);
            _this.baseFormData.deviceId = JSON.parse(res.result).deviceNumber;
            _this.baseFormData.deviceId = JSON.parse(res.result).deviceNumber;
            console.log(_this.baseFormData);
          },
          fail: function (res) {
            console.log(res);
          },
        });
      },
      submit(ref) {
        this.$refs[ref]
          .validate()
          .then((res) => {
            console.log("success", res);
            uni.showToast({
              title: `校验通过`,
            });
          })
          .catch((err) => {
            console.log("err", err);
          });
      },
      back() {
        uni.navigateBack();
      },
    },
  };
</script>

<style></style>
